<template>
    <div class="shouye">
        <!-- 需求是将students数据遍历出来 -->
        <ul>
            <li v-for="item in students" :key="item.id">
                <!-- <router-link :to="{ name: 'itemdetail', params: { id: item.id } }"> -->
                <router-link :to="`/itemdetail/${item.id}`">
                    <!-- http://localhost:3000/#/shouye/itemdetail?id=03 -->
                    <img :src="item.img" alt="">
                    <p>{{item.name}}</p>
                </router-link>
            </li>
        </ul>
        <!-- <router-view></router-view> -->
        <button @click="$router.forward()">testForward</button>
        <button @click="$router.back()">返回</button>
        <button @click="change">更新一下值</button>
        <h1>{{info}}</h1>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                students: [
                    {
                    id: "01",
                    name: "王洋洋",
                    img: require("../assets/img/yangyang.jpg"),
                    },
                    {
                    id: "02",
                    name: "chaochao",
                    img: require("../assets/img/chaochao.jpg"),
                    },
                    {
                    id: "03",
                    name: "jianing",
                    img: require("../assets/img/jianing.jpg"),
                    },
                ],
                info:"惊不惊喜，意不意外",
            };
        },
        beforeCreate(){
            console.log(1);
        },
        //进入路由组件前
        beforeRouteEnter(to,from,next){
            console.log("路由守卫");
            console.log(to); //目标路由
            console.log(from); //起始路由
            next((component) => {
                console.log(component);
                console.log(component.students);
            });
            // console.log(this);
            console.log(2);
        },

        beforeRouteLeave(to, from, next) {
            // ...
            console.log("离开222222222");
            console.log(to);
            console.log(from);
            next();
            console.log(this);
        },
        methods: {
            change() {
                this.info = "王洋洋摸了两下";
                console.log(this.$route);
                this.$route.meta.name = "xxxx";
            },
        },
    };
</script>

<style lang="scss" scoped>
.shouye{
    ul{
        li{
            img{
                width: 200px;
                height: 200px;
            }
        }
    }
}
</style>